<template>
  <div>
    <div class="menu-dlc">
      <button class="glow-button" type="primary" @click="showLoginModal">
        <span class="icon"><img src="../img/tx.svg" /></span>登录
      </button>
    </div>
    <!-- 弹窗 -->
    <transition name="modal-overlay">
      <div v-if="isLoginModalVisible" class="modal-overlay">
        <div class="modal-content" style="height: 480px">
          <!-- 登录框内右上角关闭按钮 -->
          <img src="../img/guanbi.svg" alt="关闭" class="close-icon" @click="closeLoginModal" />
          <!-- 登录内容 -->
          <Login @login-success="handleLoginSuccess" />
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import "./before.css"
import Login from "@/components/login/Login.vue";
import { ref } from "vue";

// 控制浮空弹窗显示状态
const isLoginModalVisible = ref(false);
const username = ref("");
const password = ref("");

// 显示登录弹窗
const showLoginModal = () => {
  isLoginModalVisible.value = true;
};

// 关闭登录弹窗
const closeLoginModal = () => {
  isLoginModalVisible.value = false;
};

// 登录成功时关闭弹窗
const handleLoginSuccess = () => {
  isLoginModalVisible.value = false;
  setTimeout(() => {
    window.location.reload(); // 延迟两秒后刷新页面
  }, 1000);
};
</script>

